<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Vue-resource</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="node_modules/vue/dist/vue.min.js"></script>
<script src="node_modules/vue-resource/dist/vue-resource.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>Vue-resource插件</h1>
        <a href="javascript:;" class="btn btn-primary" @click="get()">Get 请求</a>
        <a href="javascript:;" class="btn btn-success" @click="post()">Post 请求</a>
        <a href="javascript:;" class="btn btn-info" @click="jsonp()">JSONP 请求</a>
        <a href="javascript:;" class="btn btn-info" @click="http">http</a>
        <p>{{msg}}</p>
    </div>
    <script>
    new Vue({
        el: "#app",
        data: {
            msg:''
        },
        mounted: function() {
            //全局拦截器 
            Vue.http.interceptors.push(function(request,next){//请求，流转
                console.log('请求初始化');
                next(function(response){
                    console.log('请求响应后');
                    return response;
                })
            })
        },
        http:{
            root:"http://localhost:8090/ImoocMall/" //全局路径配置
        },
        methods: { 
            get:function(){
                this.$http.get('package.json',{
                    params:{
                        userId:"101"
                    },
                    headers:{//配置
                        token:"acc"
                    }
                }).then(function(res){
                    this.msg=res.data;
                },error=>{
                    this.msg=error;
                })
            },
            post(){
                this.$http.post('package.json',{
                    data:{
                        userId:"102"
                    },
                    headers:{
                        token:"abc"
                    }
                }).then(res=>{
                    this.msg=res.data;
                },error=>{
                    this.msg=error;
                })
            },
            jsonp(){//跨域，模拟script标签发送get请求
                this.$http.jsonp('http://www.imooc.com/course/AjaxCourseMembers?ids=912').then(res=>{
                    this.msg=res.data;
                })
            },
            http(){
                //配置方式
                this.$http({
                    url:'package.json',
                    method:'Get',
                    params:{
                        userId:"101"
                    },
                    timeout:50,
                    before(){
                        console.log("请求前")
                    }
                }).then(res=>{
                    this.msg=res.data;
                })
            }
        },
    });
    </script>
</body>
</html>